<template>
  <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      :disabled="lookView"
    >
      <div slot="header" class="clearfix">
        <span>{{$t('basic_information')}}</span>
      </div>
      <el-form-item :label="$t('select_employing_company')" prop="approvalName">
        <employerSelect v-model="form.employerId"></employerSelect>
      </el-form-item>
      <el-form-item :label="$t('approval_workflow_name')" prop="approvalName">
        <el-input
          v-model="form.approvalName"
          :placeholder="$t('please_enter',{name:$t('approval_workflow_name')})"
          :show-word-limit="true"
        />
      </el-form-item>
      <el-form-item :label="$t('workflow_description')" prop="description">
        <el-input
          type="textarea"
          v-model="form.description"
          :placeholder="$t('please_enter',{name:$t('workflow_description')})"
          :show-word-limit="true"
        />
      </el-form-item>
      <el-form-item :label="$t('approval_event')" prop="incident">
        <el-select
          v-model="form.incident"
          :placeholder="$t('please_select_approval_event')"
          clearable
        >
          <el-option
            v-for="dict in dict.type.approval_event"
            :key="dict.value"
            :label="dict.label"
            :value="parseInt(dict.value)"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('customize_approver')" prop="vacationType">
        <!-- 开始审批流 -->
        <div class="liu">
          <!-- 审批流列表 -->
          <div class="liu-list">
            <div
              class="liu-list-one"
              v-for="(item, index) in form.configDTOList"
              :key="index"
            >
              <div class="liu-list-one-sp" @click="handleAdd(item, index)">
                <span>{{$t('approver')}}：{{ item.approveName }}</span>
                <span class="cs">{{$t('copy_to')}}：{{ item.ccName }}</span>
              </div>
              <div style="padding-bottom: 20px" v-if="!lookView">
                <i
                  class="el-icon-plus"
                  @click.stop="handleAdds"
                  style="margin: 0 20px"
                ></i>
                <i class="el-icon-minus" @click.stop="handlejian(index)"></i>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" v-if="!lookView">
      <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
      <el-button @click="cancel">{{ $t('cancel') }}</el-button>
    </div>

    <choosePeople
      ref="peopleChange"
      @handleAddPeople="handleAddPeople"
    ></choosePeople>
  </el-dialog>
</template>

<script>
import { approvalProcess, approvalProcessUp } from "@/api/custom/employerList";
import choosePeople from "@/views/custom/approvalWay/choosePeople.vue";
import employerSelect from "@/views/components/custom/employerSelect.vue";
export default {
  dicts: ["approval_event"],
  components: {
    choosePeople,
    employerSelect,
  },
  props: {
    detailParams: Object,
  },
  data() {
    return {
      title: "",
      open: false,
      form: {
        approvalName: "",
        description: "",
        incident: "",
        configDTOList: [
          {
            approveBizId: "",
            approveType: "",
            approveName: "",
            ccBizId: "",
            ccType: "",
            ccName: "",
          },
        ],
      },
      rules: {
        vacationName: [
          {
            required: true,
            message: this.$t('cannot_empty',{name:this.$t('approval_workflow_name')}),
            trigger: "blur",
          },
        ],
        vacationCode: [
          {
            required: true,
            message: this.$t('cannot_empty',{name:this.$t('holiday_code')}),
            trigger: "blur",
          },
        ],
      },
      lookView: false,
      needIndex: "",
    };
  },
  created() {},
  methods: {
    submitForm() {
      this.form.configVOList = this.form.configDTOList;
      delete this.form.createTime;
      if (this.title == this.$t('add')) {
        approvalProcess(this.form).then((res) => {
          this.$message.success(this.$t('operation_successful'));
          this.$emit("handleSuccess");
          this.open = false;
        });
      }
      if (this.title == this.$t('edit')) {
        approvalProcessUp(this.form).then((res) => {
          this.$message.success(this.$t('operation_successful'));
          this.$emit("handleSuccess");
          this.open = false;
        });
      }
    },
    cancel() {
      this.open = false;
    },
    showDateschedule(detailParams) {
      this.open = true;
      this.title = detailParams.title;
      this.lookView = detailParams.lookView;
      if (this.title == this.$t('add')) {
        this.form = {
          approvalName: "",
          description: "",
          incident: "",
          configDTOList: [
            {
              approveBizId: "",
              approveType: "",
              approveName: "",
              ccBizId: "",
              ccType: "",
              ccName: "",
            },
          ],
        };
      }
      if (this.title == this.$t('edit')) {
        this.form = detailParams.item;
      }
      if (this.title == this.$t('view')) {
        this.form = detailParams.item;
      }
      // this.form = detailParams.item
    },
    handleAdds() {
      this.form.configDTOList.push({
        approveBizId: "",
        approveType: "1",
        approveName: "",
        ccBizId: "",
        ccType: "1",
        ccName: "",
      });
    },

    handlejian(index) {
      if (this.form.configDTOList && this.form.configDTOList.length == 1) {
        this.$message.warning(this.$t('at_least_one'));
      } else {
        this.form.configDTOList.splice(index, 1);
      }
    },
    handleAdd(item, index) {
      if (!this.form.employerId) {
        this.$message.warning(this.$t('select_employer'));
        return;
      }
      if (this.lookView) {
        return;
      }
      this.needIndex = index;
      this.$refs.peopleChange.handleChange(item,this.form.employerId);
    },
    handleAddPeople(e) {
      this.form.configDTOList[this.needIndex] = e;
      this.$forceUpdate();
    },
  },
};
</script>
<style lang="scss" scoped>
.liu {
  width: 100%;
  &-list {
    &-one {
      display: flex;
      align-items: center;
      &-sp {
        width: 200px;
        border: 1px solid #cccccc;
        margin-bottom: 30px;
        padding: 2px 10px;
        box-sizing: border-box;
        display: flex;
        flex-flow: column;
      }
    }
  }
}
</style>
